<template>
  <div class="container-a">
    <search @inputValue="inputValue"></search>
    <div class="c-l-wrap">
      <div class="contacts-list" v-for="i in contactsData">
        <div class="letter">{{i.letter}}</div>
        <ul class="contacts--ul">
          <li v-for="p in i.arr">
            <div class="img-h">
              <img :src="p.img">
            </div>
            <div class="name">
              {{p.name}}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import search from "../search.vue"
  import {contactsData} from "../../js/data.js"
  export default {
    data () {
      return {
        keyWords: '',
        contactsData,
      }
    },
    methods: {
      inputValue(v){
        this.keyWords = v;
      }
    },
    components: {
      search
    }
  }
</script>

<style scoped lang="scss">
  @import "../../css/mixin";
  @import "../../css/common";

  .container-a {
    overflow: hidden;
  }

  .c-l-wrap {
    height: calc(100% - 42px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .contacts-list {
    .letter {
      padding-left: 12px;
      font-size: 16px;
      color: $gray_color_font;
    }
    .contacts--ul {
      border-top: 1px solid #d8d8d8;
      border-bottom: 1px solid #d8d8d8;
      background-color: #fff;
      $mh: 34px;
      > li {
        position: relative;
        height: 42px;
        display: flex;
        align-items: center;
        @include bord_bottom(12px);
        &:last-child:before {
          display: none;
        }
        &:active{
          background-color: #dddddd;
        }
        .img-h {
          position: absolute;
          left: 10px;
          height: $mh;
          width: $mh;
          border-radius: 17px;
          overflow: hidden;
          img {
            height: $mh;
            width: $mh;
          }
        }
        .name {
          margin-left: 50px;
          font-size: 14px;
        }
      }
    }
  }

</style>
